<template>
  <div class="list">
    <div class="text-right">
      <el-button type="primary" size="small" @click="add">添加</el-button>
    </div>
    <el-table v-loading="loading" border :data="tableData" class="mt20">
      <el-table-column
        align="center"
        prop="id"
        label="报修项id"
      />
      <el-table-column
        align="center"
        prop="name"
        label="报修项名称"
      />
      <el-table-column
        align="center"
        prop="action"
        label="操作"
      >
        <template slot-scope="scope">
          <div>
            <el-button type="success" size="small" @click="edit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible="visible" width="400px">
      <div>
        <el-input v-model.trim="name" placeholder="请输入维修项名称" :disabled="submitLoading" />
      </div>
      <div class="text-center mt20">
        <el-button type="primary" size="small" :loading="submitLoading" @click="save">保存</el-button>
        <el-button type="info" size="small" @click="cancle">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { repairItemList, repairItemAdd, repairItemEdit, repairItemDel } from '@/api'
export default {
  name: 'RepairItemList',
  data() {
    return {
      loading: false,
      tableData: [],
      visible: false,
      title: '添加维修项',
      id: '',
      name: '',
      submitLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      if (this.loading) return
      this.loading = true
      await repairItemList().then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          return
        }
        this.tableData = []
      })
      this.loading = false
    },
    del(row) {
      const that = this
      this.$confirm('确定删除该报修项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await repairItemDel({ id: row.id }).then(res => {
            if (res.code === 0) {
              that.$message.success('删除成功')
              that.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    add() {
      this.visible = true
      this.title = '添加维修项'
      this.id = ''
      this.name = ''
    },
    edit(row) {
      this.visible = true
      this.title = '编辑维修项'
      this.id = row.id
      this.name = row.name
    },
    async save() {
      if (!this.name) {
        this.$message.warning('请填写维修项名称再提交')
        return
      }
      if (this.submitLoading) return
      this.submitLoading = true
      if (this.id) {
        await repairItemEdit({ name: this.name, id: this.id }).then(res => {
          if (res.code === 0) {
            this.getList()
            this.cancle()
          }
        })
      } else {
        await repairItemAdd({ name: this.name }).then(res => {
          if (res.code === 0) {
            this.getList()
            this.cancle()
          }
        })
      }
      this.submitLoading = false
    },
    cancle() {
      this.visible = false
    }
  }
}
</script>

